<template>
    <div id="v-center">
        <el-row class="e-row" type="flex" justify="space-between">
            <!-- 巡检不良整改完成率 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <!-- <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div> -->
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>巡检违规整改完成率</span>
                </div>
                <v-right-top 
                    :rightTopData="rightTopData"
                />
            </el-col>

            <!-- 巡检不良汇总 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div>
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>巡检违规分类汇总</span>
                </div>
                <v-right-center 
                    :rightCenterData="rightCenterData"
                />
            </el-col>

            <!-- 特殊作业 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <!-- <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div> -->
                <div style="display: flex;justify-content: space-between;align-items: center; width: 100%;" class="cont-c">
                    <div style="display: flex;align-items: center;">
                        <div class="i-c">
                            <img src="../image/team_icon.png" />
                        </div>
                        <span>作业类型</span>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <div style="display: flex;align-items: center;">
                            <span class="span-s" :class="{'is-chose': isChose === 0}" @click="choseHandel(0)" style="margin-right: 10px;cursor: pointer;">天</span>
                            <span class="span-s" :class="{'is-chose': isChose === 1}" @click="choseHandel(1)" style="margin-right: 10px;cursor: pointer;">周</span>
                            <span class="span-s" :class="{'is-chose': isChose === 2}" @click="choseHandel(2)" style="margin-right: 10px;cursor: pointer;">月</span>
                        </div>
                        <template v-if=" isChose === 0 ">
                            <el-date-picker
                                style="margin-right: 10px;"
                                size="small"
                                v-model="choseValue"
                                type="date"
                                placeholder="天"
                                value-format="YYYY-MM-DD"
                                @change="dataChange"
                            />
                        </template>
                        <template v-if=" isChose === 1 ">
                            <el-date-picker
                                style="margin-right: 10px;"
                                size="small"
                                v-model="choseValue"
                                type="week"
                                placeholder="周"
                                format="[第] ww [周]"
                                @change="dataChange"
                            />
                        </template>
                        <template v-if=" isChose === 2 ">
                            <el-date-picker
                                style="margin-right: 10px;"
                                size="small"
                                v-model="choseValue"
                                type="month"
                                placeholder="月"
                                @change="dataChange"
                            />
                        </template>
                    </div>
                </div>
                <v-right-btn
                    :rightBtnData="rightBtnData"
                /> 
            </el-col>

        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , watchEffect, watch, reactive , toRaw, toRefs } from 'vue';
import VRightBtn from './e-component/v-right/v-right-b.vue';
import VRightCenter from './e-component/v-right/v-right-c.vue';
import VRightTop from './e-component/v-right/v-right-t.vue';
import moment from 'moment';
export default defineComponent( {
    name:'v-center',
    components: {
        VRightBtn,
        VRightCenter,
        VRightTop,
    },
    props: {
        totalData: {
            type: Object,
            default: {}
        },
        isAgain: {
            type: Boolean,
            default: true,
        }
    },
    setup(props,ctx){
        const rightCenterData = ref();
        const rightBtnData = ref();
        const rightTopData = ref();
        const choseValue = ref();
        const dataArr: any = ref([]);
        const isChose = ref(0);
        const choseHandel = (num: number) => {
            choseValue.value = '';
            isChose.value = num;
            dataArr.value = [];
        }
        const dataChange = (val: any) => {
            dataArr.value = [];
            if(val){
                let dataVal: any;
                let selectedStart: any;
                let selectedEnd: any;
                if(isChose.value === 0){
                    dataVal = val;
                    selectedStart = moment(dataVal).startOf('day').format('YYYY-MM-DD HH:mm:ss');
                    selectedEnd = moment(dataVal).endOf('day').format('YYYY-MM-DD HH:mm:ss');
                }
                if(isChose.value === 1){
                    const weekNumber = moment(val).week();
                    dataVal = moment().week(weekNumber);
                    selectedStart = dataVal.startOf('week').format('YYYY-MM-DD HH:mm:ss');
                    selectedEnd = dataVal.endOf('week').format('YYYY-MM-DD HH:mm:ss');
                }
                if(isChose.value === 2){
                    dataVal = moment(val, 'ddd MMM DD YYYY HH:mm:ss GMTZ');
                    selectedStart = dataVal.startOf('month').format('YYYY-MM-DD HH:mm:ss');
                    selectedEnd = dataVal.endOf('month').format('YYYY-MM-DD HH:mm:ss');
                }
                dataArr.value.push(selectedStart , selectedEnd);
            }
        }
        watch(() => dataArr.value , (newVal) => {
            ctx.emit('searchData',newVal);
        });
        watchEffect(() => {
            if(props.isAgain){
                isChose.value = 0;
                dataArr.value = [];
            }
            let getData = props.totalData;
            if(Object.keys(getData).length !== 0){
                rightCenterData.value = JSON.stringify(getData.violationSummary);
                rightBtnData.value = JSON.stringify(getData.specialOperation);
                rightTopData.value = JSON.stringify(getData.checkChangeRate);
            }
        });
        return {
            rightCenterData,
            rightBtnData,
            rightTopData,
            choseValue,
            isChose,
            choseHandel,
            dataChange,
        }
    }
})
</script>
<style lang="scss"> @import '../style/echarts.scss'; </style>
<style lang="scss" scoped>
[data-theme='dark']{
    .is-chose{
        color: var(--el-color-primary) !important;
    }
}
.span-s{
    color: #FFFFFF;
}
#v-center{
    height: 100%;
    .e-row{
        display: flex;
        height: 100%;
        .c-mb20{
            height: 32.4%;
            position: relative;
            background-color: transparent; /* 透明背景 */
            overflow: hidden; /* 隐藏超出部分 */
            .t-c,.cont-c{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 40px;
            }
            .t-c{ z-index: 1 }
            .cont-c{
                z-index: 2;
                display: flex;
                align-items: center;
                .i-c{
                    margin: 0 8px;
                    width: 15px;
                    height: 15px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    display: block;
                }
            }
            .pro-t,.pro-l,.pro-r,.pro-b{
                position: absolute;
                z-index: 0;
            }
            .pro-t,.pro-b{
                width: 100%;
                height: 1px;
                left: 0;
            }
            .pro-l,.pro-r{
                height: 100%;
                width: 1px;
                top: 0;
            }
            .pro-t{ top: 0; }
            .pro-b{ bottom: 0; }
            .pro-l{ left: 0; }
            .pro-r{ right: 0; }
        }
    }
}
</style>